<template>
  <div class="auth-container">
    <div class="auth-backdrop" aria-hidden="true"></div>
    
    <!-- 主题切换按钮 -->
    <button @click="themeStore.toggleTheme()" class="theme-toggle-login" :title="themeStore.theme === 'dark' ? '切换到亮色主题' : '切换到暗色主题'">
      {{ themeStore.theme === 'dark' ? '☀️' : '🌙' }}
    </button>
    
    <div class="auth-box glass neon-border">
      <div class="auth-header">
  <h1 class="logo">✨ CodeForge AI</h1>
        <p class="subtitle">AI 驱动的 Python 代码生成助手（仅支持英文）</p>
      </div>

      <!-- 登录表单 -->
      <div v-if="!isRegisterMode" class="auth-form">
        <h2>登录</h2>
        <form @submit.prevent="handleLogin">
          <div class="form-group">
            <input
              v-model="loginForm.username"
              type="text"
              placeholder="用户名"
              required
              autocomplete="username"
            />
          </div>
          <div class="form-group">
            <input
              v-model="loginForm.password"
              type="password"
              placeholder="密码"
              required
              autocomplete="current-password"
            />
          </div>
          <div v-if="error" class="error-message">{{ error }}</div>
          <button type="submit" class="btn btn-primary btn-large" :disabled="loading">
            {{ loading ? '登录中...' : '登录' }}
          </button>
        </form>
        <p class="switch-text">
          还没有账号? <a href="#" @click.prevent="toggleMode">立即注册</a>
        </p>
      </div>

      <!-- 注册表单 -->
      <div v-else class="auth-form">
        <h2>注册</h2>
        <form @submit.prevent="handleRegister">
          <div class="form-group">
            <input
              v-model="registerForm.username"
              type="text"
              placeholder="用户名"
              required
              autocomplete="username"
            />
          </div>
          <div class="form-group">
            <input
              v-model="registerForm.email"
              type="email"
              placeholder="邮箱"
              required
              autocomplete="email"
            />
          </div>
          <div class="form-group">
            <input
              v-model="registerForm.password"
              type="password"
              placeholder="密码(至少6位)"
              required
              minlength="6"
              autocomplete="new-password"
            />
          </div>
          <div v-if="error" class="error-message">{{ error }}</div>
          <button type="submit" class="btn btn-primary btn-large" :disabled="loading">
            {{ loading ? '注册中...' : '注册' }}
          </button>
        </form>
        <p class="switch-text">
          已有账号? <a href="#" @click.prevent="toggleMode">返回登录</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useThemeStore } from '@/stores/theme'

const router = useRouter()
const authStore = useAuthStore()
const themeStore = useThemeStore()

const isRegisterMode = ref(false)
const loading = ref(false)
const error = ref('')

const loginForm = ref({
  username: '',
  password: ''
})

const registerForm = ref({
  username: '',
  email: '',
  password: ''
})

function toggleMode() {
  isRegisterMode.value = !isRegisterMode.value
  error.value = ''
}

async function handleLogin() {
  loading.value = true
  error.value = ''
  
  const result = await authStore.login(loginForm.value)
  
  if (result.success) {
    router.push('/')
  } else {
    error.value = result.message
  }
  
  loading.value = false
}

async function handleRegister() {
  loading.value = true
  error.value = ''
  
  const result = await authStore.register(registerForm.value)
  
  if (result.success) {
    router.push('/')
  } else {
    error.value = result.message
  }
  
  loading.value = false
}
</script>

<style scoped>
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bg-secondary);
  transition: all 0.3s ease;
}

[data-theme="dark"] .auth-container {
  background: radial-gradient(80rem 80rem at 80% -10%, rgba(34,211,238,0.10), transparent 60%),
              radial-gradient(60rem 60rem at 10% 110%, rgba(99,102,241,0.10), transparent 60%),
              #070B14;
}

[data-theme="light"] .auth-container {
  background: radial-gradient(80rem 80rem at 80% -10%, rgba(14,165,233,0.06), transparent 60%),
              radial-gradient(60rem 60rem at 10% 110%, rgba(99,102,241,0.05), transparent 60%),
              #F8FAFC;
}

.auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

[data-theme="dark"] .auth-backdrop {
  background: repeating-linear-gradient(to right, rgba(255,255,255,0.04) 0 1px, transparent 1px 120px),
              repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, transparent 1px 120px);
}

[data-theme="light"] .auth-backdrop {
  background: repeating-linear-gradient(to right, rgba(0,0,0,0.04) 0 1px, transparent 1px 120px),
              repeating-linear-gradient(to bottom, rgba(0,0,0,0.04) 0 1px, transparent 1px 120px);
}

.theme-toggle-login {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 10;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}

.theme-toggle-login:hover {
  transform: rotate(20deg) scale(1.1);
  box-shadow: var(--shadow-lg);
}

.auth-box {
  position: relative;
  z-index: 1;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  transition: all 0.3s ease;
}

[data-theme="dark"] .auth-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.logo { font-size: 2rem; font-weight: 800; color: var(--primary-color); margin-bottom: .5rem; letter-spacing: .5px; }

.subtitle {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.auth-form h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.form-group {
  margin-bottom: 1rem;
}

.error-message {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--error-color);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  border: 1px solid var(--error-color);
}

[data-theme="light"] .error-message {
  background-color: #FEE2E2;
}

.auth-form button[type="submit"] {
  width: 100%;
  margin-top: 0.5rem;
}

.switch-text {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.switch-text a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.switch-text a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .auth-box {
    padding: 2rem 1.5rem;
  }
  
  .logo {
    font-size: 1.75rem;
  }
}
</style>
